<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>模拟聊天室显示语句保持最新显示</title>
  <style>
    * {
      border-collapse: collapse;
    }

    .dialog_box {
      width: 400px;
      height: 600px;
      margin: 0 auto;
      background: #B4D9EA;
      border: 10px solid #B4D9EA;
    }

    .box_content {
      width: 100%;
      height: 400px;
      overflow-y: scroll;
    }

    .box_content p {
      line-height: 30px;
      word-wrap: break-word;
      word-break: normal;
    }

    .input_content {
      width: 400px;
      height: 200px;
      margin-top: 10px
    }

    #input_info {
      height: 130px;
      resize: none;
      width: 370px;
      font-size: 24px;
      padding: 15px;
      color: #232323;
      border: none;
      background: #fff;
    }

    .btn_submit {
      float: right;
      padding: 5px 15px;
      border-radius: 5px;
    }
  </style>
</head>

<body>
  <div class="dialog_box">
    <div class="box_content">
    </div>
    <div class="input_content">
      <textarea name="" id="input_info"></textarea>
      <button type="submit" class="btn_submit">提交</button>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
  <script>
    $(function () {
      var boxCon = $(".box_content"),
        pLen;
      $('.btn_submit').click(function () {
        var p = document.createElement("p");
        p.innerHTML = $('#input_info').val();
        $('.box_content').append(p);
        $('#input_info').val('')
        var scrollH = 0;
        pLen = $(".box_content p").length;
        for (var i = 0; i < pLen; i++) {
          scrollH += $(".box_content p").eq(i).outerHeight(true);
        }
        if (scrollH > 400) {
          boxCon.scrollTop(scrollH);
        }
        $('#input_info').focus();
      })
    })

  </script>
</body>

</html>